/*
 * @Author: 肖思汗 
 * @Date: 2025-06-25 09:26:19 
 * @Last Modified by: 肖思汗
 * @Last Modified time: 2025-07-15 17:32:58
 */

import { isUndefined } from "lodash";
import { makeAutoObservable } from "mobx";
import { FontData } from "types/type";
import textModelApi from "./textModelApi";

export interface Option {
    value: string | number;
    label: string;
    children?: Option[];
}

class TextModelStore {
    constructor() {
        makeAutoObservable(this, {}, { deep: false });
        this.getNextPage(true);
    }

    show = false;
    text = "";
    fontWeight?: "bold" | "normal"; // 粗体
    fontStyle?: "italic" | "normal"; // 斜体
    stroke: `#${string}` = "#000"; // 描边颜色
    direction?: "ltr" | "rtl"; // 文字方向
    textAlign?: "left" | "center" | "right"; // 文字对齐方式
    strokeWidth: number = 0; // 描边
    charSpacing: number = 0; // 间距
    lineHeight: number = 0; // 行高
    bendDegree: number = 0; // 弯曲角度
    color: `#${string}` = "#000"; // 颜色
    fontFamily: string = ""; // 字体
    underline: boolean = false; // 下划线

    set(options: {
        show?: boolean
        text?: string, // 文本
        fontWeight?: "bold" | "normal"; // 粗体
        fontStyle?: "italic" | "normal"; // 斜体
        direction?: "ltr" | "rtl"; // 文字方向
        textAlign?: "left" | "center" | "right", // 文字对齐方式
        stroke?: `#${string}`, // 描边颜色
        strokeWidth?: number, // 描边
        charSpacing?: number, // 间距
        lineHeight?: number, // 行高
        bendDegree?: number, // 弯曲角度
        color?: `#${string}`, // 颜色
        fontFamily?: string, // 字体
        underline?: boolean, // 下划线
    }) {
        Object.entries(options).forEach(([key, value]) => {
            if (!isUndefined(value)) {
                (this as any)[key] = value;
            }
        });
    }

    //加载中
    loading = false;
    setLoading(loading: boolean) {
        this.loading = loading;
    }

    page = 1;
    pageSize: number = 999;
    hasNext: boolean = true;
    // 素材列表
    fonts: Array<FontData> = [];
    async getNextPage(reset: boolean = false) {
        if (reset) {
            this.page = 1;
            this.hasNext = true;
        } else if (!this.hasNext || this.loading) {
            return;
        } else {
            this.page++;
        }
        this.loading = true;

        const result = await textModelApi.getFonts(this.page, this.pageSize);

        if (result?.rows) {
            if (reset) {
                this.fonts = [];
                await new Promise(resolve => requestAnimationFrame(resolve));
                await new Promise(resolve => requestAnimationFrame(resolve));
                await new Promise(resolve => requestAnimationFrame(resolve));
                this.fonts = [...result.rows];
            } else {
                this.fonts = [...this.fonts, ...result.rows];
            }
            this.hasNext = (result.rows.length === this.pageSize);
            this.loading = false;
        }

    }


}

const textModelStore = new TextModelStore();

export default textModelStore;